<template>
  <!-- 附加表五运输信息增加 -->
  <div class="tb">
    <mt-header fixed title="道路货物运输量专项调查" style="z-index: 999999;">
      <span slot="left" @click="goBack">
        <mt-button icon="back" slot="left">返回</mt-button>
      </span>
    </mt-header>
    <mt-field label="车牌号码:" placeholder="请输入" readonly=true type="text" v-model="vehicleNo"></mt-field>
    <mt-field label="车牌颜色:" placeholder="请输入" readonly=true type="text" v-model="plateColorCode"></mt-field>
    <mt-field label="趟次序号:" placeholder="请输入" type="text" v-model="fzdcbfd62019002"></mt-field>
    <mt-field label="开始日期:" placeholder="请输入" type="date" v-model="fzdcbfd62019003"></mt-field>
    <mt-field label="结束日期:" placeholder="请输入" type="date" v-model="fzdcbfd62019004"></mt-field>
    <mt-field
      label="起点名称:"
      placeholder="请输入"
      readonly=true
      type="text"
      v-model="startInfo"
      @click.native.capture="showStart1"
    ></mt-field>
    <mt-field
      label="起点行政区划代码:"
      placeholder="请输入"
      readonly=true
      type="text"
      v-model="fzdcbfd62019006"
    ></mt-field>
    <mt-field
      label="终点地点名称:"
      placeholder="请输入"
      readonly=true
      type="text"
      v-model="endInfo"
      @click.native.capture="showStart2"
    ></mt-field>
    <mt-field
      label="终点行政区划代码:"
      placeholder="请输入"
      readonly=true
      type="text"
      v-model="fzdcbfd62019008"
    ></mt-field>
    <mt-field
      label="货物种类名称:"
      placeholder="请输入"
      readonly=true
      type="text"
      v-model="currentTags.name"
      @click.native.capture="choseHwzl"
    ></mt-field>
    <!-- <mt-field label="货物种类代码:" placeholder="请输入" :readonly="true" type="text" v-model="fzdcbfd62019010"></mt-field> -->
    <mt-field label="详细货物名称:" placeholder="请输入" type="text" v-model="fzdcbfd62019022"></mt-field> 
    <mt-field label="载货里程（公里）:" placeholder="请输入" type="number" v-model="fzdcbfd62019011"></mt-field>

    <mt-field label="高速公路里程（公里）:" placeholder="请输入" type="number" v-model="fzdcbfd62019012"></mt-field>
    <mt-field label="货运量（吨）:" placeholder="请输入" type="number" v-model="fzdcbfd62019013"></mt-field>
    <mt-field label="货物周转量（吨公里）:" placeholder="请输入" type="number" v-model="fzdcbfd62019014"></mt-field>
    <mt-field label="集装箱箱运量（TEU）:" placeholder="请输入" type="number" v-model="fzdcbfd62019015"></mt-field>
    <mt-field label="收入（元）:" placeholder="请输入" type="number" v-model="fzdcbfd62019016"></mt-field>
    <mt-field label="计价方式:" @click.native.capture="choseJjfs" :readonly="true" placeholder="请输入" type="text" v-model="fzdcbfd62019017"></mt-field>
    <mt-field label="成本（元）:" placeholder="请输入" type="number" v-model="fzdcbfd62019018"></mt-field>

    <div class="button">
      <mt-button type="primary" size="large" @click="check">确定</mt-button>
    </div>
    <!-- 起点选择器 -->
    <mt-popup
      v-model="popupVisible1"
      popup-transition="popup-fade"
      closeOnClickModal="true"
      position="bottom"
    >
      <mt-picker :slots="slotss" @change="onValuesChange1" value-key="value" showToolbar>
        <mt-header title="选择省市区">
          <mt-button slot="left" class="cancle" @click="popupVisible1 = !popupVisible1">取消</mt-button>
          <mt-button slot="right" class="sure" @click="sure">确定</mt-button>
        </mt-header>
      </mt-picker>
    </mt-popup>
    <!-- 终点选择器 -->
    <mt-popup
      v-model="popupVisible2"
      popup-transition="popup-fade"
      closeOnClickModal="true"
      position="bottom"
    >
      <mt-picker :slots="slotss" @change="onValuesChange1" value-key="value" showToolbar>
        <mt-header title="选择省市区">
          <mt-button slot="left" class="cancle" @click="popupVisible2 = !popupVisible2">取消</mt-button>
          <mt-button slot="right" class="sure" @click="sure1">确定</mt-button>
        </mt-header>
      </mt-picker>
    </mt-popup>
    <mt-popup
      v-model="popupVisible"
      popup-transition="popup-fade"
      closeOnClickModal="true"
      position="bottom"
    >
      <mt-picker :slots="slots" showToolbar ref="picker" value-key="name">
        <div class="picker-toolbar-title">
          <div class="usi-btn-cancel" @click="popupVisible = !popupVisible">取消</div>
          <div class>请选择货物类型</div>
          <div class="usi-btn-sure" @click="handleConfig">确定</div>
        </div>
      </mt-picker>
    </mt-popup>
    <mt-popup
      v-model="popupVisible3"
      popup-transition="popup-fade"
      closeOnClickModal="true"
      position="bottom">
      <mt-picker :slots="slotsJjfs"  showToolbar ref="pickerJjfs" value-key="name">
        <div class="picker-toolbar-title">
          <div class="usi-btn-cancel" @click="popupVisible3 = !popupVisible3">取消</div>
          <div class>请选择计价方式</div>
          <div class="usi-btn-sure" @click="handleConfig1">确定</div>
        </div>
      </mt-picker>
    </mt-popup>
  </div>
</template>
    
    <script>
import { Field } from "mint-ui";
import { Picker } from "mint-ui";
import { Popup } from "mint-ui";
import { Toast } from "mint-ui";
export default {
  data() {
    return {
      recid: "",
      yhmlk: "",
      companyType: "", // 企业类型
      vehicleNo: "", // 车牌号码
      plateColorCode: "", // 车牌颜色
      fzdcbfd62019001: "",
      fzdcbfd62019002: "",
      fzdcbfd62019003: "",
      fzdcbfd62019004: "",
      fzdcbfd62019005: "",
      fzdcbfd62019006: "",
      fzdcbfd62019007: "",
      fzdcbfd62019008: "",
      fzdcbfd62019009: "",
      fzdcbfd62019010: "",
      fzdcbfd62019011: "",
      fzdcbfd62019012: "",
      fzdcbfd62019013: "",
      fzdcbfd62019014: "",
      fzdcbfd62019015: "",
      fzdcbfd62019016: "",
      fzdcbfd62019017: "",
      fzdcbfd62019018: "",
      fzdcbfd62019022: "",
      //
      showToolbar: true,
      slots: [
        {
          values: []
        }
      ],
      popupVisible: false,
      result: "",
      provinceValue: "",
      cityValue: "",
      countyValue: "",
      countyCode: "",
      startInfo: "",
      endInfo: "",
      first: "",
      second: "",
      third: "",
      iosProvinces: "",
      iosCitys: "",
      iosCountys: "",
      slotss: [
        {
          flex: 1,
          values: [],
          className: "slot1",
          textAlign: "left",
          defaultIndex: 0
        },
        {
          flex: 1,
          values: [],
          className: "slot2",
          textAlign: "center",
          defaultIndex: 0
        },
        {
          flex: 1,
          values: [],
          className: "slot3",
          textAlign: "right",
          defaultIndex: 0
        }
      ],
      popupVisible1: false,
      popupVisible2: false,
      popupVisible3: false,
      carTags: {},
      rlTags: {},
      message: "",
      flag: "hlymc",
      currentTags: {},
      userInfo: {},
      currentTags1: {},
      slotsJjfs: [
        {
          values: [
            {code:"1",name:"整车计"},
            {code:"2",name:"体积计"},
            {code:"3",name:"重量计"},
            {code:"9",name:"其他"},
          ]
        }
      ],
    };
  },
  created() {
    this.userInfo = JSON.parse(localStorage.getItem("userInfo") || {});
    this.vehicleNo = this.userInfo.vehicleNo;
    this.plateColorCode=this.userInfo.plateColorCode
  },
  mounted() {
    this.getDate()
  },
  methods: {
    goBack() {
      //点击后退
      this.$router.go(-1);
    },
    // 校验条件
    check() {
      if(this.fzdcbfd62019002 == ''){
          Toast("趟次序号不能为空！");
      } else if(this.fzdcbfd62019003 == ''){
          Toast("开始日期不能为空！");
      } else if(this.fzdcbfd62019004 == ''){
          Toast("结束日期不能为空！");
      } else if(this.fzdcbfd62019005 == ''){
          Toast("起点名称不能为空！");
      } else if(this.fzdcbfd62019007 == ''){
          Toast("终点名称不能为空！");
      } else if(this.fzdcbfd62019009 == ''){
          Toast("货物种类名称不能为空！");
      }  else if(this.fzdcbfd62019009 == '其他' && this.fzdcbfd62019022 == ''){
          Toast("详细货物名称不能为空！");
      } else if(this.fzdcbfd62019011 == ''){
          Toast("载货里程（公里）不能为空！");
      } else if(this.fzdcbfd62019013 == ''){
          Toast("货运量（吨）不能为空！");
      } else if(this.fzdcbfd62019014 == ''){
          Toast("货物周转量（吨公里）不能为空！");
      } else if(this.fzdcbfd62019016 != '' && this.fzdcbfd62019017 == ""){
          Toast("收入和计价方式两者同时填写或同时不填。");
      } else if(this.fzdcbfd62019016 == '' && this.fzdcbfd62019017 != ""){
          Toast("收入和计价方式两者同时填写或同时不填。");
      } else {
          this.commit(); 
      }
    },
    getDate() {
      let data = {};
      data.companyType =this.userInfo.companyType
      data.recid = this.$route.query.recid;
      this.axios
        .post(
          "http://zxdc.catsic.com:9090/sampling/sjAssit/selectFzdcbfd06ForSJ",
          { data: data },
          {
            headers: {
              "Content-Type": "application/json",
              mobileHeader:
                '{"sessionId":' + localStorage.getItem("sessionId") + "}"
            }
          }
        )
        .then(
          result => {
            // console.log("result-->>"+JSON.stringify(result.data))
            if (result.data.status == "1000") {
              let fzdcbfd06 = result.data.data.Fzdcbfd06;
              (this.recid = fzdcbfd06.recid),
                (this.yhmlk = fzdcbfd06.yhmlk),
                (this.fzdcbfd62019001 = fzdcbfd06.fzdcbfd62019001),
                (this.fzdcbfd62019002 = fzdcbfd06.fzdcbfd62019002),
                (this.fzdcbfd62019003 = fzdcbfd06.fzdcbfd62019003
                  .replace("/", "-")
                  .replace("/", "-")),
                (this.fzdcbfd62019004 = fzdcbfd06.fzdcbfd62019004
                  .replace("/", "-")
                  .replace("/", "-")),
                (this.fzdcbfd62019005 = fzdcbfd06.fzdcbfd62019005),
                (this.startInfo = fzdcbfd06.fzdcbfd62019005),
                (this.fzdcbfd62019006 = fzdcbfd06.fzdcbfd62019006),
                (this.endInfo = fzdcbfd06.fzdcbfd62019007),
                (this.fzdcbfd62019007 = fzdcbfd06.fzdcbfd62019007),
                (this.fzdcbfd62019008 = fzdcbfd06.fzdcbfd62019008),
                (this.fzdcbfd62019009 = fzdcbfd06.fzdcbfd62019009),
                (this.currentTags.name = fzdcbfd06.fzdcbfd62019009),
                (this.fzdcbfd62019010 = fzdcbfd06.fzdcbfd62019010),
                (this.fzdcbfd62019011 = fzdcbfd06.fzdcbfd62019011),
                (this.fzdcbfd62019012 = fzdcbfd06.fzdcbfd62019012),
                (this.fzdcbfd62019013 = fzdcbfd06.fzdcbfd62019013),
                (this.fzdcbfd62019014 = fzdcbfd06.fzdcbfd62019014),
                (this.fzdcbfd62019015 = fzdcbfd06.fzdcbfd62019015),
                (this.fzdcbfd62019016 = fzdcbfd06.fzdcbfd62019016),
                (this.fzdcbfd62019017 = this.getJjfsName(fzdcbfd06.fzdcbfd62019017)),
                (this.fzdcbfd62019018 = fzdcbfd06.fzdcbfd62019018),
                (this.fzdcbfd62019022 = fzdcbfd06.fzdcbfd62019022),
                (this.floatorder = fzdcbfd06.floatorder),
                console.log(result);
            }
          },
          error => {
            console.log("getyhcars request error:" + error);
          }
        );
    },
    commit() {
      let data = {};
      let fzdcbfd06 = {};
      data.vehicleNo = this.vehicleNo;
      data.plateColorCode = this.userInfo.plateColorCode;
      data.companyType = this.userInfo.companyType;
      (fzdcbfd06.recid = this.$route.query.recid),
        (fzdcbfd06.yhmlk = this.userInfo.yhRecid),
        (fzdcbfd06.fzdcbfd62019001 = this.fzdcbfd62019001),
        (fzdcbfd06.fzdcbfd62019002 = this.fzdcbfd62019002),
        (fzdcbfd06.fzdcbfd62019003 = this.fzdcbfd62019003.replace(/-/g, "/")),
        (fzdcbfd06.fzdcbfd62019004 = this.fzdcbfd62019004.replace(/-/g, "/")),
        (fzdcbfd06.fzdcbfd62019005 = this.startInfo),
        (fzdcbfd06.fzdcbfd62019006 = this.fzdcbfd62019006),
        (fzdcbfd06.fzdcbfd62019007 = this.endInfo),
        (fzdcbfd06.fzdcbfd62019008 = this.fzdcbfd62019008),
        (fzdcbfd06.fzdcbfd62019009 = this.fzdcbfd62019009),
        (fzdcbfd06.fzdcbfd62019010 = this.fzdcbfd62019010),
        (fzdcbfd06.fzdcbfd62019011 = this.fzdcbfd62019011),
        (fzdcbfd06.fzdcbfd62019012 = this.fzdcbfd62019012),
        (fzdcbfd06.fzdcbfd62019013 = this.fzdcbfd62019013),
        (fzdcbfd06.fzdcbfd62019014 = this.fzdcbfd62019014),
        (fzdcbfd06.fzdcbfd62019015 = this.fzdcbfd62019015),
        (fzdcbfd06.fzdcbfd62019016 = this.fzdcbfd62019016),
        (fzdcbfd06.fzdcbfd62019017 = this.getJjfsCode(this.fzdcbfd62019017)),
        (fzdcbfd06.fzdcbfd62019018 = this.fzdcbfd62019018),
        (fzdcbfd06.fzdcbfd62019022 = this.fzdcbfd62019022),
        (fzdcbfd06.floatorder = this.floatorder),
        (data.fzdcbfd06 = fzdcbfd06),
        console.log("tijiao-->>" + JSON.stringify(data.fzdcbfd06));
      this.axios
        .post(
          "http://zxdc.catsic.com:9090/sampling/sjAssit/modifyFzdcbfd06ForSJ",
          { data: data },
          {
            headers: {
              "Content-Type": "application/json",
              mobileHeader:
                '{"sessionId":' + localStorage.getItem("sessionId") + "}"
            }
          }
        )
        .then(
          result => {
            if (result.data.status == "1000") {
              console.log("保存成功");
              console.log(result);
              this.goback();
            } else {
              Toast(result.data.msg);
            }
          },
          error => {
            console.log("getyhcars request error:" + error);
          }
        );
    },
    // 选择货物种类
    choseHwzl() {
      this.$http.get("http://zxdc.catsic.com:9090/sampling/json/carTyps").then(
        response => {
          console.log("数据加载成功");
          this.slots[0].values = response.data.hwzl;
          this.popupVisible = true;
        },
        response => {
          console.log("数据加载失败");
        }
      );
    },
    choseJjfs(){
          this.popupVisible3 = true;
    },
    handleConfig1: function() {
      this.currentTags1 = this.$refs.pickerJjfs.getValues()[0];
      this.fzdcbfd62019017 = this.currentTags1.name;
      this.popupVisible3 = false;
    },
    // 弹出框点击确定按钮点击事件 add by qzn 20190627
    handleConfig: function() {
      this.currentTags = this.$refs.picker.getValues()[0];
      this.fzdcbfd62019009 = this.currentTags.name;
      this.fzdcbfd62019010 = this.currentTags.code;
      this.popupVisible = false;
    },
    //
    showStart1() {
      this.axios.get("http://zxdc.catsic.com:9090/sampling/json/city").then(
        response => {
          console.log("数据加载成功");

          this.slotss[0].values = response.data.iosProvinces;
          this.iosProvinces = response.data.iosProvinces;

          this.slotss[1].values = response.data.iosCitys;
          this.iosCitys = response.data.iosCitys;

          this.slotss[2].values = response.data.iosCountys;
          this.iosCountys = response.data.iosCountys;

          this.popupVisible1 = true;
        },
        response => {
          console.log("数据加载失败");
        }
      );
    },
    showStart2() {
      this.axios.get("http://zxdc.catsic.com:9090/sampling/json/city").then(
        response => {
          console.log("数据加载成功");
          console.log(response);
          this.slotss[0].values = response.data.iosProvinces;
          this.iosProvinces = response.data.iosProvinces;

          this.slotss[1].values = response.data.iosCitys;
          this.iosCitys = response.data.iosCitys;

          this.slotss[2].values = response.data.iosCountys;
          this.iosCountys = response.data.iosCountys;

          this.popupVisible2 = true;
        },
        response => {
          console.log("数据加载失败");
        }
      );
    },
    // 点击确定按钮
    sure() {
      var show = false;
      var result = this.result;
      var province = this.provinceValue;
      var city = this.cityValue;
      var county = this.countyValue;

      this.startInfo = province + "-" + city + "-" + county;
      this.fzdcbfd62019006 = this.countyCode;
      this.popupVisible1 = false;
      console.log(
        show,
        result,
        province,
        city,
        county,
        "---" + this.fzdcbfd62019006
      );
    },
    sure1() {
      var show = false;
      var result = this.result;
      var province = this.provinceValue;
      var city = this.cityValue;
      var county = this.countyValue;

      this.endInfo = province + "-" + city + "-" + county;
      this.fzdcbfd62019008 = this.countyCode;
      this.popupVisible2 = false;
      console.log(
        show,
        result,
        province,
        city,
        county,
        "---" + this.fzdcbfd62019008
      );
    },
    // 筛选器值变化时调用
    onValuesChange1(picker, values) {
      var cityArray = [],
        countyArray = [];
      if (values[0]) {
        for (let i = 0; i < this.iosCitys.length; i++) {
          if (values[0].id == this.iosCitys[i].parentId) {
            cityArray.push(this.iosCitys[i]);
          }
        }
        picker.setSlotValues(1, cityArray);
      }

      if (values[1]) {
        for (let j = 0; j < this.iosCountys.length; j++) {
          if (values[1].id == this.iosCountys[j].parentId) {
            countyArray.push(this.iosCountys[j]);
          }
        }
        picker.setSlotValues(2, countyArray);
      }
      var result = this.result;

      if (typeof values[1] == "object" && typeof values[2] == "object") {
        result = values[0].value + values[1].value + values[2].value;
        this.provinceValue = values[0].value;
        this.cityValue = values[1].value;
        this.countyValue = values[2].value;
        this.countyCode = values[2].id;

        for (let i = 0; i < this.iosProvinces.length; i++) {
          if (this.iosProvinces[i].value == this.province) {
            this.first = i;
          }
        }
        for (let i = 0; i < this.cityArray.length; i++) {
          if (this.city == cityArray[i].value) {
            this.second = i;
          }
        }
        for (var j = 0; j < countyArray.length; j++) {
          if (this.county == countyArray[j].value) {
            this.third = j;
          }
        }
        this.slotss[0].defaultIndex = parseInt(this.first);
        this.slotss[1].defaultIndex = parseInt(this.second);
      } else if (typeof values[1] != "object" && typeof values[2] == "object") {
        values[1] = this.iosCitys;
        result = values[0].value + this.city + values[2].value;
        this.provinceValue = values[0].value;
        this.cityValue = this.city;
        this.countyValue = values[2].value;
        this.countyCode = values[2].id;
      }
      this.result = result;
    },
    getJjfsCode(name) {// 获取货物类型名称
                  var goodsTypes = [
                    {
                      code: "1",
                      name: "整车计"
                    },
                    {
                      code: "2",
                      name: "体积计"
                    },
                    {
                      code: "3",
                      name: "重量计"
                    },
                    {
                      code: "9",
                      name: "其他"
                    }
                  ];
                  var code = "";
                  goodsTypes.forEach(item => {
                    if (item.name === name) {
                      code = item.code;
                    }
                  });
                  return code;
              },
              getJjfsName(code) {
                  var goodsTypes = [
                    {
                      code: "1",
                      name: "整车计"
                    },
                    {
                      code: "2",
                      name: "体积计"
                    },
                    {
                      code: "3",
                      name: "重量计"
                    },
                    {
                      code: "9",
                      name: "其他"
                    }
                  ];
                  var name = "";
                  goodsTypes.forEach(item => {
                    if (item.code === code) {
                      name = item.name;
                    }
                  });
                  return name;
              },
    goback() {
      this.$router.go(-1);
    }
  }
};
</script>
    
    <style lang="scss" scoped>
.tb {
  padding-top: 10px;
}

.mint-cell {
  background-color: #efeff4;
}
input[type="number"] {
  line-height: 21px;
  width: 100%;
  height: 40px;
  margin-bottom: 0px;
  padding: 10px 15px;
  -webkit-user-select: text;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 3px;
  outline: 0;
  background-color: #fff;
  -webkit-appearance: none;
}
.button {
  padding-top: 3%;
  padding-left: 5%;
  padding-right: 5%;
  padding-bottom: 5%;
}
.picker-toolbar-title {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  height: 200px;
  line-height: 40px;
  font-size: 16px;
  width: 100%;
}
.usi-btn-cancel,
.usi-btn-sure {
  color: #26a2ff;
}
.mint-popup-bottom {
  width: 100%;
  top: auto;
  right: auto;
  bottom: 0;
}
</style>